@charset "UTF-8";

/* 使用通配符 选择页面上所有的元素 */
* {
    padding: 0px 0px; /*清除所有 元素的 外边距*/
    margin: 0px 0px; /*清除所有 元素的 内边距*/
}

/* 设定页面字体默认样式 */
body {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}

/*选择页面上所有的 div 标记 */
div {
    display: block ; /* 让 div 默认以 block 呈现 */
}

/* 选择页面上所有的 img 标记 */
img {
    border: none ; /*取消所有图片的边框*/
}

/* 选择页面上所有的 a 标记 */
a {
    text-decoration: none ; /*取消所有 超链接 的 下划线*/
    blr: expression( this.onFocus=this.blur() ); /* 去除超链接周围的虚框 ( For IE  )*/
    outline: none ; /* 去除超链接周围的虚框 ( For FireFox ) */
}

/* 用伪类 设置 a 元素在 鼠标悬浮时的样式 以及 激活链接时的状态*/
a:hover,
a:active {
    cursor: pointer; /*设置 鼠标悬浮到链接 和 链接被激活后 的 光标样式*/
}

/* 纤细字体 */
.x-font-light { font-weight: lighter;}
/* 正常字体 */
.x-font-normal { font-weight: normal ; }
/* 加粗字体 */
.x-font-bold { font-weight: bold ; }

/* 设置元素高度自动适应 (当元素内部包含浮动元素时使用) */
.x-auto-height {
    height: auto !important; /*高度自动适应*/
    overflow: hidden; /*当内容超过边界时隐藏 , 配合高度为 auto 一起实现 高度自动适应( 尤其是元素内部有浮动元素时 ) */
}

/* 专门用来清除浮动  ( both 表示清除两侧浮动 )*/
.x-clear { clear: both ;  }

/* 用 div 实现在页面上显示一个 只有一个像素的横线 */
.x-line { height: 0px; border-bottom: 1px solid #d3d3d3; margin: 0px auto; }

/* 当需要 通栏 时使用 across ,
 * 它可以让 元素 从 页面最左边 抵达 页面 最右边 ,
 * 如果 元素 内部有浮动子元素,并且希望高度自动适应,则需要配合 .auto-height 一起使用
 * */
.x-across { min-width: 900px;  clear: both; }

.x-center-container {
    text-align: center; /*针对IE浏览器居中对齐*/
}

.x-center {
    min-width: 900px;
    margin: 0px auto; /* DIV Center : For Gecko , WebKit , Presto(Opera) , Blink ( Google ) */
    text-align: left;
    border: 0px;
}

/** 栅格系统 使用说明:
*    假设页面上上的某一行 ( 用 class= "x-row" 表示 ) 可以分为 12 等份,
*    12等份中的每一份就是一个 格子 ( 用 class="cell-1" 表示 ) ,单个 cell 宽度 为 十二分之一 行 , 即 8.3333333333%
*    使用举例:
*    <div class="x-row">
*          <span class="x-cell-5" >一个5倍于单个单元格的格子</span>
*          <span class="x-cell-7" >一个7倍于单个单元格的格子</span>
*    </div>
*    注意, 两部分 加起来,刚好是 满行 ( 12 个格子的空间 )
**/
.x-row { overflow: hidden; }

/*设置栅格系统的浮动方式*/
.x-cell-1,.x-cell-2,.x-cell-3,.x-cell-4,.x-cell-5,.x-cell-6,.x-cell-7,.x-cell-8,.x-cell-9,.x-cell-10,.x-cell-11{ float: left ; min-height: 1px ; }

/*假设每一行可以等分为12分,则每份占8.3333333333% */
.x-cell-1 { width : 8.333333333%  }
/*假设每一行可以等分为12分,则两份占16.6666666667% */
.x-cell-2 { width : 16.666666666% }
.x-cell-3 { width : 25% }
.x-cell-4 { width : 33.333333332% }
.x-cell-5 { width : 41.666666665% }
.x-cell-6 { width : 50% }
.x-cell-7 { width : 58.333333331% }
.x-cell-8 { width : 66.666666664% }
.x-cell-9 { width : 75% }
.x-cell-10 { width : 83.33333333% }
.x-cell-11 { width : 91.666666663% }

/*假设每一行可以等分为12分,则每份占8.3333333333% */
.x-offset-1 { margin-left: 8.3333333333%;}
.x-offset-2 { margin-left: 16.6666666667%;  }
.x-offset-3 {  margin-left: 25%;  }
.x-offset-4 { margin-left: 33.3333333333%; }
.x-offset-5 { margin-left: 41.6666666667%; }
.x-offset-6 { margin-left: 50%; }
.x-offset-7 { margin-left: 58.3333333333%; }
.x-offset-8 { margin-left: 66.6666666667%; }
.x-offset-9 { margin-left: 75%; }
.x-offset-10 {  margin-left: 83.3333333333%; }
.x-offset-11 { margin-left: 91.6666666667%; }

/* 用 class 选择器 , 设置六种标题的对齐方式 */
.x-h1, .x-h2, .x-h3, .x-h4, .x-h5, .x-h6 { text-align: left; font-weight: normal; }
.x-h1 { font-size: 32px;  line-height: 64px; }
.x-h2 {  font-size: 28px;  line-height: 56px; }
.x-h3 { font-size: 24px; line-height: 48px; }
.x-h4 { font-size: 20px; line-height: 40px; }
.x-h5 { font-size: 16px; line-height: 32px; }
.x-h6 { font-size: 12px; line-height: 24px; }

/** 如果某个区域的文字禁止选择复制,添加该样式即可*/
.x-disable-select {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

/**  定义容器的 内发光效果 (用边框的内阴影实现) */
.x-shadow-inset { border: 1px solid #d3d3d3; border-radius: 3px; box-shadow: 0px 0px 4px 3px #eeeeee inset; }

/**  定义容器的 外发光效果 (用边框的外阴影实现) */
.x-shadow-outside { margin: 10px 10px; border: 1px solid #d3d3d3; border-radius: 3px; box-shadow: 0px 0px 5px 4px #eeeeee; }

/** 定义一个遮罩层的样式*/
.x-mask {
    display: none ;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:2000;
    background-color: rgba(239, 239, 239, 0.5);
    filter:alpha(opacity=50);
}

/**
  * 用来在 mask 上显示一个 对话框
  *  对话框的宽度 和 高度 需要根据需要指定,比如 宽 400px , 高 300px
  *  为了让 对话框 在正中间显示,
  *         需要将 对话框的 margin-top 调整为 负的二分之一高 ( 比如 -150px )
  *         需要将 对话框的 margin-left 调整为 负的二分之一宽 ( 比如 -200px )
  *         如果有边框,还要考虑边框的影响
  **/
.x-mask-dialog {
    position:absolute;
    left:50%;
    top:50%;
    z-index:2001;
    background-color: #FAFAFA;
    border: 1px solid #dedede ;
    border-radius: 4px ;
}

.x-mask-dialog-title {
    height: 30px ;
    border-bottom: 1px solid #dedede ;
}

.x-mask-dialog-title b {
    float: left ;
    line-height: 30px ;
    font-size: 14px ;
    font-weight: normal ;
    text-align: left ;
    margin-left: 6px ;
}

.x-mask-dialog-title i {
    float: right ;
    height: 12px ;
    width: 12px ;
    margin-top: 8px ;
    margin-right: 8px ;
    border-radius: 2px ;
    /*border: 1px solid #dedede ;*/
    background-image: url("../images/icons-tx.png")  ;
    background-position: -90px -50px ;
    background-repeat: no-repeat ;
}

.x-mask-dialog-title i:hover {
    background-position: -106px -50px ;
}


